<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="Stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C2b42eb4a9ea4cd555d0fc891caf9095"></script>
</head>
<body>
    <div style="margin-top:50px;">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-4" style="border-left:1px solid #f3f3f3;">
            	<c:if test="${id==null}"><h1 style="text-align:center;margin-bottom:30px;">添加房屋信息</h1></c:if>
                <c:if test="${id!=null}"><h1 style="text-align:center;margin-bottom:30px;">编辑房屋信息</h1></c:if>
                <form class="form-horizontal" enctype="multipart/form-data" action="${pageContext.request.contextPath}/save" method="post">
                    <div class="form-group">
                    <input type="hidden" name="hid" value="${id==null?0:id}"/>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="topic" value="${house.topic}" name="topic" placeholder="请输入标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">房屋图片</label>
                        <div class="col-sm-8">
                            <input type="file" id="filename" name="housefilename">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">房屋名称</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" value="${house.photo.title}" id="photo.title" name="photo.title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地区</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="district.id">
                            	<c:if test="${house.district==null}">
                            		<option>--请选择地区--</option>
                            	</c:if>
                                <c:forEach items="${districts}" var="district">
                                	<c:if test="${house.district.id==district.id}">
                                		<option value="${district.id}" selected="selected">${district.name}</option>
                                	</c:if>
                                	<c:if test="${house.district.id!=district.id}">
                                		<option value="${district.id}">${district.name}</option>
                                	</c:if>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" name="street.id">
                                <c:if test="${house.street==null}">
                            		<option>--请选择街道--</option>
                            	</c:if>
                                <c:forEach items="${streets}" var="street">
                                	<c:if test="${house.street.id==street.id}">
                                		<option value="${street.id}" selected="selected">${street.name}</option>
                                	</c:if>
                                	<c:if test="${house.street.id!=street.id}">
                                		<option value="${street.id}">${street.name}</option>
                                	</c:if>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">房屋类型</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="type.id">
                            	<c:if test="${house.type==null}">
                            		<option>--请选择类型--</option>
                            	</c:if>
                                <c:forEach items="${types}" var="type">
                                	<c:if test="${house.type.id==type.id}">
                                		<option value="${type.id}" selected="selected">${type.name}</option>
                                	</c:if>
                                	<c:if test="${house.type.id!=type.id}">
                                		<option value="${type.id}">${type.name}</option>
                                	</c:if>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">楼层</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" value="${house.floor}" id="floor" name="floor" placeholder="请输入楼层">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" value="${house.price}" id="price" name="price" placeholder="请输入价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">经度</label>
                        <div class="col-sm-4">
                            <input type="text" readonly = "readonly" value="${house.longitude}" class="form-control" id="longitude" name="longitude"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">纬度</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" value="${house.latitude}" readonly = "readonly" id="latitude" name="latitude"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否上架</label>
                        <div class="col-sm-4">
                            <div class="checkbox">
                                <label>
                                	<c:if test="${house.state==1}"><input type="checkbox" name="state" value="1" checked="checked"></c:if>
                                    <c:if test="${house.state!=1}"><input type="checkbox" name="state" value="1"></c:if>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">详细信息</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="content" rows="4" style="resize:none;"
                                placeholder="请输入详细信息">${house.content}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6" style="border-left:1px solid #f3f3f3;">
                    <div class="form-horizontal">
                        <div id="r-result" class="form-group">
                            <label class="col-sm-2 control-label">查询经纬度:</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="suggestId" size="20" />
                            </div>
                            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                        </div>
                    </div>
                    <div style="margin:10px 90px;">当前定位城市：<span id="city"></span></div>
                    <div id="l-map" style="width:80%;height:700px;margin-left:60px;"></div>
            </div>
            <div class="col-md-1"></div>

        </div>
    </div>
</body>
<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var map = new BMap.Map("l-map");
	map.centerAndZoom("广州",15);                   // 初始化地图,设置城市和地图级别。
	//启用滚轮放大缩小，默认禁用
	map.enableScrollWheelZoom();
	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		setPlace();
        var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上,并调整地图视野
		myGeo.getPoint($("#suggestId").val(), function(point){
			if (point) {
				//更新地图标记及显示经纬度
				showCurrentLocation(point);
				refreshOverlay(point);
			}else{
				alert("您选择地址没有解析到结果!");
			}
		}, "广州市");
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}

	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
		$("#city").html(cityName)
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);

    //在框中显示经纬度
	function showCurrentLocation(locationPoint){
		$("#longitude").val(locationPoint.lng);
        $("#latitude").val(locationPoint.lat);
	}

    //在地图上更新标记
	function refreshOverlay(locationPoint){
		map.clearOverlays();				//清除覆盖物
		var mk = new BMap.Marker(locationPoint);	//添加覆盖点
		map.addOverlay(mk);		
		map.panTo(locationPoint);					//转转义中心
	}

	map.addEventListener('click', function(e){
		//更新地图标记及显示经纬度
		refreshOverlay(e.point);
	    showCurrentLocation(e.point);
	    //根据经纬坐标解释地址
	    var geo = new BMap.Geocoder();
		geo.getLocation(e.point, function(r){
			$("#suggestId").val(r.address);
		});
	});
    
	
</script>
</html>